Skip to main content

App Open

App Open ads are full-screen ads that appear when users launch your app, providing an excellent opportunity to monetize app startup moments. Unlike interstitial ads, App Open ads are specifically designed for app launch scenarios and help create a smooth user experience during cold starts and app foregrounding events.

Key Features​

  • Launch Optimization: Designed specifically for app startup scenarios
  • User-Friendly: Integrates seamlessly with splash screens and loading experiences
  • Revenue Maximization: Monetizes high-engagement moments when users actively open your app
  • Retention-Focused: Built with user retention best practices in mind

Best Practices​

Implementation Guidelines
  • Always use a splash/loading screen before showing the App Open ad
  • Inform users about the upcoming ad with a message like "Watch an ad from our sponsor while the app loads"
  • Ensure proper sequence: Splash screen → App Open ad → App content
  • Initialize the SDK before loading App Open ads
Frequency Management

To maintain good user experience and retention:

  • Implement external frequency capping outside of the SDK
  • Consider cooldown periods between App Open ads
  • Wait for new users to engage with your app before showing their first App Open ad
  • Show ads strategically (e.g., every 2nd or 3rd app launch)

Start loading an ad​

Load App Open ads during SDK initialization, ideally in your main App component or during app startup.

import { useAppOpen } from "react-native-xmediator";

export default function App() {
  const { load } = useAppOpen();

  useEffect(() => {
    load("<placement-id>");
  }, []);

  return <>{/* your app code... */}</>;
}

Showing an ad​

Show App Open ads when your app comes to the foreground. Check if an ad is ready before attempting to show it.

import { useAppOpen } from "react-native-xmediator";

export default function App() {
  const { show, isReady } = useAppOpen();

  const showAppOpenAd = () => {
    if (isReady()) {
      show(undefined, "app-open-ad-space");
    }
  };

  return <>{/* your app code... */}</>;
}

Showing an ad with placementId​

For specific placement targeting, use the placement-specific methods:

import { useAppOpen } from "react-native-xmediator";

export default function App() {
  const { show, isReady } = useAppOpen();
  const placementId = "<placement-id>";

  const showAppOpenAd = () => {
    if (isReady(placementId)) {
      show(placementId, "app-open-ad-space");
    }
  };

  return <>{/* your app code... */}</>;
}

Built-in features​

Auto loading​

When App Open ads are dismissed or fail to show, the SDK automatically triggers a new load request to ensure the next app launch opportunity is ready.

Auto retry​

Failed load attempts are automatically retried with exponential backoff, ensuring optimal fill rates for your app launch monetization.

Additional settings​

Register ad callbacks​

Monitor App Open ad lifecycle events to implement custom logic and user experience flows:

import { useAppOpen, useAppOpenEvents } from "react-native-xmediator";

export default function App() {
  const { load, show, isReady } = useAppOpen();

  useAppOpenEvents(
    {
      onLoaded: (placementId, loadResult) => {
        console.log("App Open loaded", placementId, loadResult);
      },
      onShowed: (placementId) => {
        console.log("App Open is being shown", placementId);
      },
      onFailedToShow: (placementId, error) => {
        console.log("App Open failed to show", placementId, error);
        // Resume your app's flow here
      },
      onDismissed: (placementId) => {
        console.log("App Open dismissed", placementId);
        // Resume your app's flow here
      },
      onImpression: (placementId, impressionData) => {
        console.log("App Open impression", placementId, impressionData);
      },
      onClicked: (placementId) => {
        console.log("App Open clicked", placementId);
      },
    },
    []
  );

  return <>{/* your app code... */}</>;
}

React Native Lifecycle Integration​

For optimal App Open ad implementation, integrate with React Native's AppState to detect when your app comes to the foreground:

import React, { useEffect, useRef } from 'react';
import { AppState, AppStateStatus } from 'react-native';
import { useAppOpen } from "react-native-xmediator";

export default function App() {
  const { show, isReady } = useAppOpen();
  const appState = useRef(AppState.currentState);

  useEffect(() => {
    const handleAppStateChange = (nextAppState: AppStateStatus) => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        // App has come to the foreground
        if (isReady()) {
          show(undefined, "app-open-ad-space");
        }
      }
      appState.current = nextAppState;
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);

    return () => {
      subscription?.remove();
    };
  }, [show, isReady]);

  return <>{/* your app code... */}</>;
}

Code example​

Here's a comprehensive example showing App Open ads with splash screen integration:

AppOpenExample.tsx
import React, { useEffect, useRef, useState } from 'react';
import { View, Text, ActivityIndicator, StyleSheet, AppState, AppStateStatus } from 'react-native';
import { useAppOpen, useAppOpenEvents } from "react-native-xmediator";

const APP_OPEN_PLACEMENT_ID = "<your-placement-id>";

export default function AppOpenExample() {
  const { load, show, isReady } = useAppOpen();
  const [isAppOpenReady, setIsAppOpenReady] = useState(false);
  const [showSplash, setShowSplash] = useState(true);
  const [splashMessage, setSplashMessage] = useState("Watch an ad from our sponsor while the app loads...");
  const appState = useRef(AppState.currentState);

  // Initialize SDK and load App Open ad
  useEffect(() => {
    load(APP_OPEN_PLACEMENT_ID);
    
    // Show ad after a short delay to ensure splash screen is visible
    const timer = setTimeout(() => {
      showAppOpenIfReady();
    }, 2000);

    return () => clearTimeout(timer);
  }, []);

  // App lifecycle integration
  useEffect(() => {
    const handleAppStateChange = (nextAppState: AppStateStatus) => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === 'active' &&
        isAppOpenReady
      ) {
        showAppOpenIfReady();
      }
      appState.current = nextAppState;
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);
    return () => subscription?.remove();
  }, [isAppOpenReady]);

  // App Open event handlers
  useAppOpenEvents(
    {
      onLoaded: (placementId, loadResult) => {
        console.log("App Open loaded!", placementId, loadResult);
        setIsAppOpenReady(true);
      },
      onShowed: (placementId) => {
        console.log("App Open is being shown!", placementId);
        // Hide splash screen when ad is shown
        setShowSplash(false);
      },
      onFailedToShow: (placementId, error) => {
        console.log("App Open failed to show", placementId, error);
        proceedToMainApp();
      },
      onDismissed: (placementId) => {
        console.log("App Open dismissed!", placementId);
        proceedToMainApp();
      },
      onImpression: (placementId, impressionData) => {
        console.log("App Open impression!", placementId, impressionData);
      },
      onClicked: (placementId) => {
        console.log("App Open clicked!", placementId);
      },
    },
    []
  );

  const showAppOpenIfReady = () => {
    if (isReady(APP_OPEN_PLACEMENT_ID)) {
      show(APP_OPEN_PLACEMENT_ID, "app-open-ad-space");
    } else {
      // No ad ready, proceed to main app
      proceedToMainApp();
    }
  };

  const proceedToMainApp = () => {
    setShowSplash(false);
    setSplashMessage("Welcome to the app!");
    // Navigate to main app content or show main screen
    console.log("Proceeding to main app content");
  };

  if (showSplash) {
    return (
      <View style={styles.splashContainer}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text style={styles.splashMessage}>{splashMessage}</Text>
      </View>
    );
  }

  return (
    <View style={styles.mainContainer}>
      <Text style={styles.welcomeText}>Main App Content</Text>
      {/* Your main app content here */}
    </View>
  );
}

const styles = StyleSheet.create({
  splashContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  splashMessage: {
    marginTop: 20,
    fontSize: 16,
    textAlign: 'center',
    paddingHorizontal: 20,
    color: '#333333',
  },
  mainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333333',
  },
});